<template>
    <div>
        <el-row>
            <el-col :span="12">
                <el-form :inline="true" :model="queryMap" class="demo-form-inline">
                    <el-form-item label="订餐日期">
                        <el-date-picker
                                v-model="dateRange"
                                end-placeholder="结束日期"
                                range-separator="至"
                                start-placeholder="开始日期"
                                type="daterange"
                                value-format="yyyy-MM-dd"
                                style="width: 240px"
                        >
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="订餐部门">
                        <el-select v-model="queryMap.deptId" clearable>
                            <el-option
                                    v-for="dept in deptList" :key="dept.deptId" :label="dept.deptName"
                                    :value="dept.deptId"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="订餐状态" >
                        <el-select v-model="queryMap.statusId" clearable style="width: 240px">
                            <el-option
                                    v-for="status in statusList" :key="status.statusId" :label="status.status"
                                    :value="status.statusId"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="发起员工">
                        <el-input v-model="queryMap.empName" clearable></el-input>
                    </el-form-item>
                </el-form>
            </el-col>
            <el-col :span="4">
                <el-button-group>
                    <el-button type="primary" @click="search">查询</el-button>
                </el-button-group>
            </el-col>
            <el-col :span="4" :offset="4" >
                <el-button-group>
                    <el-button type="primary" @click="delOrder">删除</el-button>
                    <el-button icon="el-icon-more" type="primary" @click="openDetail">查看详情</el-button>
                </el-button-group>
            </el-col>
        </el-row>
        <el-table
                :data="tableData"
                :height="480"
                border
                stripe
                style="width: 100%"
                @selection-change="handleSelectionChange"
        >
            >
            <el-table-column
                    prop="orderId"
                    type="selection"
            >

            </el-table-column>
            <el-table-column
                    label="序号"
                    type="index"
                    width="60"
                    align="center"
            >
            </el-table-column>
            <el-table-column
                    label="发起人"
                    prop="empName"
                    width="140"
            >
            </el-table-column>
            <el-table-column
                    label="部门名称"
                    prop="deptName"
                    width="140"
            >
            </el-table-column>
            <el-table-column
                    label="订餐人员"
                    prop="members"
                    width="190"
            >
            </el-table-column>
            <el-table-column
                    :formatter="formatPrice"
                    align="right"
                    label="总金额"
                    prop="totalprice"
                    width="140"
            >
            </el-table-column>
            <el-table-column
                    align="center"
                    label="订餐日期"
                    prop="orderdate"
                    width="200"
            >
            </el-table-column>
            <el-table-column
                    label="订餐备注"
                    prop="orderNote"
                    width="180"
            >
            </el-table-column>
            <el-table-column
                    label="订餐状态"
                    prop="status"
                    width="180"
            >
            </el-table-column>

        </el-table>
        <!-- 分页 -->
        <el-pagination
                :current-page="queryMap.page"
                :page-size="queryMap.limit"
                :page-sizes="[10, 20, 50, 100, 200]"
                :total="total"
                layout="total, sizes, prev, pager, next, jumper"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
        >
        </el-pagination>
        <OrderDetail
                :detail-visible.sync="detailVisible"
                :detailData="detailData"
        ></OrderDetail>
    </div>
</template>

<script>
import OrderDetail from "@/components/OrderDetail.vue";

export default {
    name: "OrderSummary",
    components: {OrderDetail},
    data() {
        return {
            //查询条件
            queryMap: {
                page: 1,  // 当前页码
                limit: 10, // 每页条数
                statusId: '',//订餐状态
                empName: '',//员工名称
                deptId: '',//部门id
                before: '',
                after: '',
            },
            formatPrice(row, column, cellValue, index) {
                // 使用 toFixed 方法来格式化小数，保留两位小数
                // 注意：toFixed 返回的是一个字符串
                return cellValue.toFixed(2);
            },
            // 总条数
            total: 0,
            statusList: [],
            tableData: [],
            // 新增表单数据
            formData: {
                mealId: '',
                mealName: '',
                mealImage: '',
            },
            // 新增表单显隐
            formVisible: false,
            //标志新增还是修改,false为新增
            isEdit: false,
            //复选框选中的数据
            multipleSelection: [],
            dateRange: [],
            deptList: [],
            //订单的详情信息
            detailData: {
                reviewList: [],//审核信息
                mealList: [],//所定餐品相关信息
                statusId: ''//目前的审核状态
            },
            // 详情信息显隐
            detailVisible: false,

        }
    },
    methods: {
        // 查询所有订餐状态
        getStatusList() {
            const self = this;
            this.$http.get('statusList').then(res => {
                self.statusList = res.data;
            }).catch(error => {
                self.$message.error('查询订餐状态失败，请联系管理员')
            })
        },
        search() {
            // 重置页面未第一页
            this.queryMap.page = 1;
            this.getOrderList();
        },
        // 每页条数改变，val是改变后的每页条数
        handleSizeChange(val) {
            this.queryMap.limit = val;
            this.queryMap.page = 1;
            this.getDeptList();
        },
        // 页码改变，val是修改后的页面
        handleCurrentChange(val) {
            this.queryMap.page = val;
            this.getDeptList();
        },
        //打开订单详情
        openDetail() {
            const self = this
            //判断是否选中了一条数据,
            if (self.multipleSelection.length === 0) {
                self.$message({
                    type: 'warning',
                    message: "请选择要查看的数据"
                })
            } else if (self.multipleSelection.length > 1) {
                this.$message({
                    type: 'warning',
                    message: "只能选择一条数据"
                })
            } else {
                //获取选中行的主键
                let orderId = this.multipleSelection[0].orderId;
                this.detailVisible = true

                this.$http.get("/getOrderDetailById/" + orderId).then(res => {
                    //根据主键获取要修改的数据
                    this.detailData = res.data
                    this.detailVisible = true
                }).catch(error => {
                    self.$message.error("获取订餐失败")
                })
            }
        },
        delOrder() {
            const self = this
            //判断是否选中了一条数据,
            if (this.multipleSelection.length === 0) {
                self.$message({
                    type: 'info',
                    message: "请选择要删除的数据"
                })
                return
            }
            //询问用户
            this.$confirm('确定删除该订餐吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //点击确认的回调
                //存放要删除的订单的主键
                let orderArr = [];
                for (let i = 0; i < self.multipleSelection.length; i++) {
                    if ((self.multipleSelection[i].statusId===1 ||self.multipleSelection[i].statusId===2) &&
                        self.multipleSelection[i].orderdate === new Date().toISOString().substring(0, 10)){
                        self.$message.error("删除失败,删除订餐中包含有已在流程中的订餐")
                        return false
                    }
                    orderArr.push(self.multipleSelection[i].orderId)
                }
                self.$http.post('delOrder', orderArr).then(res => {
                    if (res.data === 'success') {
                        self.$message({
                            type: "success",
                            message: "删除成功"
                        })
                        //刷新列表
                        self.queryMap.page = 1;
                        self.getOrderList()

                    } else {
                        self.$message.error("删除失败,请重试")
                    }
                }).catch(() => {
                    self.$message.error("删除失败,请...")
                })
            }).catch(() => {
                //点击取消的回调
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        //点击复选框触发,val是勾选中的数据
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        // 查询所有部门
        getDeptList() {
            const self = this;
            this.$http.get('deptList').then(res => {
                self.deptList = res.data;
            }).catch(error => {
                this.$message.error('查询部门失败，请联系管理员')
            })
        },
        getOrderList() {
            const self = this
            if (self.dateRange == null) {
                this.dateRange = []
            }
            self.queryMap.before = self.dateRange[0]
            self.queryMap.after = self.dateRange[1]
            this.$http.post('getAllOrderByPage', this.queryMap).then(res => {
                self.tableData = res.data.orders
                self.total = res.data.count
                console.log(res.data.orders)
            }).catch(() => {
                this.$message.error('获取员工列表失败，请联系管理员')
            })
        }
    },
    computed: {},
    created() {
        this.getStatusList();
        this.getOrderList();
        this.getDeptList();
    }
}
</script>

<style scoped>

</style>